<template id='Game'>
  <div class="Game">
    <div class="GameTabs">
      <ul class="gameBg">
        <li v-for="(item, index) in menuList" :key="index">
          <span
            ref="tabItem"
            @click="selectMenu(item)"
            :class="[
              { isChose: tabClick == item.id },
              { tabItem: screenWidth > 480 },
            ]"
            >{{ item.name }}
            <div :class="{ isClick: tabClick == item.id }"></div>
          </span>
        </li>
      </ul>
      <div class="phone">
        <swiper class="gameSlide" :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="(item, index) in menuList" :key="index">
            <span
              ref="tabItem"
              @click="selectMenu(item)"
              :class="[{ isChose: tabClick == item.id }]"
              >{{ item.name }}
              <div :class="{ isClick: tabClick == item.id }"></div>
            </span>
          </swiper-slide>
        </swiper>
        <div
          class="swiper-button-prev swiper-button-white"
          slot="button-prev"
          @click="prev"
        ></div>
        <div
          class="swiper-button-next swiper-button-white"
          slot="button-next"
          @click="next"
        ></div>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { mapState, mapMutations } from "vuex";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "Game",
  components: {
    Swiper,
    SwiperSlide,
  },
  // 定义属性
  data() {
    return {
      screenWidth: "",
      isClick: 2, //当前选中的菜单
      menuList: [
        {
          id: 1,
          name: "猩猩抽卡",
          path: "/drawMonkey",
        },
        {
          id: 2,
          name: "我的猩猩",
          path: "/myMonkey",
        },
        {
          id: 3,
          name: "探索",
          path: "",
        },
        {
          id: 4,
          name: "打工",
          path: "/monkeyWorking",
        },
        {
          id: 5,
          name: "排行榜",
          path: "",
        },
        {
          id: 6,
          name: "装备",
          path: "",
        },
        {
          id: 7,
          name: "培养",
          path: "",
        },
      ],
      swiperOption: {
        speed: 300,
        autoplay: false,
        slidesPerView: 4,
        spaceBetween: 0,
        grabCursor: true,
        initialSlide: 0,
        loop: false,
        navigation: {},
      },
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState(["tabClick"]),
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    ...mapMutations(["changeTabClick"]),
    //切换菜单
    selectMenu(item) {
      this.changeTabClick(item);
      this.$router.push(item.path);
    },
    getScreenWidth() {
      this.screenWidth =
        document.body.clientWidth || document.documentElement.clientWidth;
    },
    //上一页
    prev() {
      this.$refs.mySwiper.$swiper.slidePrev();
    },
    //下一页
    next() {
      this.$refs.mySwiper.$swiper.slideNext();
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getScreenWidth();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.Game {
  color: #ffffff;
  font-size: 30px;
  .GameTabs {
    background-image: url("../../assets/images/game/bg.png");
    background-size: 100% 100%;
    width: 100%;
    height: 188px;
    position: absolute;
    top: 100px;
    z-index: 50;
    .gameBg {
      padding: 0 60px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      li {
        height: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        span {
          position: relative;
          cursor: pointer;
          text-shadow: 2px 2px #000000;
          .isClick {
            position: absolute;
            bottom: -15px;
            left: calc(-10% + 4px);
            width: 120%;
            height: 6px;
            background-color: #ffffff;
            border-radius: 2px;
            box-shadow: 0px 2px 0px 0px #000000;
            -webkit-animation: scale-up-hor-center 0.25s
              cubic-bezier(0.39, 0.575, 0.565, 1) both;
            animation: scale-up-hor-center 0.25s
              cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s both;
            @-webkit-keyframes scale-up-hor-center {
              0% {
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
              }
              100% {
                -webkit-transform: scaleX(1);
                transform: scaleX(1);
              }
            }
            @keyframes scale-up-hor-center {
              0% {
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
              }
              100% {
                -webkit-transform: scaleX(1);
                transform: scaleX(1);
              }
            }
          }
        }
        .tabItem:hover {
          -webkit-animation: textShadow 0.6s both;
          animation: textShadow 0.6s both;
        }
        .isChose {
          -webkit-animation: textShadow 0.6s both;
          animation: textShadow 0.6s both;
          @-webkit-keyframes textShadow {
            0% {
              opacity: 0;
              text-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000,
                0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000;
              -webkit-transform: translateX(0);
              transform: translateX(0) scale(1);
            }
            100% {
              opacity: 1;
              text-shadow: 1px 0 #000000, 2px 0 #000000, 3px 0 #000000,
                4px 0 #000000, 5px 0 #000000, 6px 0 #000000, 7px 0 #000000,
                8px 0 #000000;
              -webkit-transform: translateX(-8px);
              transform: translateX(-8px) scale(1.5);
            }
          }
          @keyframes textShadow {
            0% {
              opacity: 0;
              text-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000,
                0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000;
              -webkit-transform: translateX(0);
              transform: translateX(0) scale(1);
            }
            100% {
              opacity: 1;
              text-shadow: 1px 0 #000000, 2px 0 #000000, 3px 0 #000000,
                4px 0 #000000, 5px 0 #000000, 6px 0 #000000, 7px 0 #000000,
                8px 0 #000000;
              -webkit-transform: translateX(-8px);
              transform: translateX(-8px) scale(1.5);
            }
          }
        }
      }
      li:last-child {
        margin-right: 0;
      }
    }
    .phone {
      display: none;
    }
  }
}
@media screen and (max-width: 480px) {
  .Game {
    font-size: 20px;
    .GameTabs {
      position: fixed;
      background-image: url("../../assets/images/game/bg3.png");
      background-size: 100% 100%;
      width: 100%;
      height: 127px;
      top: 67px;
      .gameBg {
        display: none;
      }
      .phone {
        display: block;
        padding: 0 70px;
        .gameSlide {
          height: 127px;
        }
        .swiper-wrapper {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .swiper-slide {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: -20px;
            span {
              position: relative;
              cursor: pointer;
              text-shadow: 2px 2px #000000;
              .isClick {
                position: absolute;
                bottom: -5px;
                left: calc(-10% + 1.5px);
                width: 120%;
                height: 3px;
                background-color: #ffffff;
                border-radius: 2px;
                box-shadow: 0px 2px 0px 0px #000000;
                -webkit-animation: scale-up-hor-center 0.25s
                  cubic-bezier(0.39, 0.575, 0.565, 1) both;
                animation: scale-up-hor-center 0.25s
                  cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s both;
                @-webkit-keyframes scale-up-hor-center {
                  0% {
                    -webkit-transform: scaleX(0);
                    transform: scaleX(0);
                  }
                  100% {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(1);
                  }
                }
                @keyframes scale-up-hor-center {
                  0% {
                    -webkit-transform: scaleX(0);
                    transform: scaleX(0);
                  }
                  100% {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(1);
                  }
                }
              }
            }
            .isChose {
              -webkit-animation: textShadow 0.6s both;
              animation: textShadow 0.6s both;
              @-webkit-keyframes textShadow {
                0% {
                  opacity: 0;
                  text-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000;
                  -webkit-transform: translateX(0);
                  transform: translateX(0) scale(1);
                }
                100% {
                  opacity: 1;
                  text-shadow: 1px 0 #000000, 2px 0 #000000, 3px 0 #000000;
                  -webkit-transform: translateX(-3px);
                  transform: translateX(-3px) scale(1.6);
                }
              }
              @keyframes textShadow {
                0% {
                  opacity: 0;
                  text-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000;
                  -webkit-transform: translateX(0);
                  transform: translateX(0) scale(1);
                }
                100% {
                  opacity: 1;
                  text-shadow: 1px 0 #000000, 2px 0 #000000, 3px 0 #000000;
                  -webkit-transform: translateX(-3px);
                  transform: translateX(-3px) scale(1.6);
                }
              }
            }
          }
        }
        .swiper-button-prev {
          left: 30px;
          top: 35%;
        }
        .swiper-button-next {
          right: 30px;
          top: 35%;
        }
      }
    }
  }
}
</style>